<template>
  <div
    class="DLineChart"
    :id="ids"
    :chartType="chartType"
    :chartDataY="chartDataY"
    :chartDataX="chartDataX"
    :titleText="titleText"
    :subtext="subtext"
    :backgroundColor="backgroundColor"
    :style="{ height: height, width: width }"
    :textStyle="{ color: textStyle.color, fontSize: textStyle.fontSize }"
    :axisLabelX="{ margin: axisLabelX.margin, color: axisLabelX.color }"
    :zeroGradient="zeroGradient"
    :oneGradient="oneGradient"
    :nameValue="nameValue"
    :gridValue="{
      top: gridValue.top,
      right: gridValue.right,
      left: gridValue.left,
      bottom: gridValue.bottom
    }"
    :axisLabelYColor="axisLabelYColor"
    :titleScale="titleScale"
    :scaleStyle="scaleStyle"
    :lineStyleX="lineStyleX"
    :showY="showY"
  ></div>
</template>
<script>
export default {
  name: "DLineChart",
  props: {
    id: {
      type: String,
      default: ""
    },
    chartType: {
      type: String,
      default: "line"
    },
    chartDataY: {
      type: [Array, Object],
      default () {
        return null;
      }
    },
    chartDataX: {
      type: [Array, Object],
      default () {
        return null
      }
    },
    titleText: {
      type: String,
      default: ""
    },
    subtext: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "260px"
    },
    backgroundColor: {
      type: String,
      default: ""
    },
    gridValue: {
      type: Object,
      default () {
        return {
          top: '15%',
          right: '3%',
          left: '5%',
          bottom: '12%'
        }
      }
    },
    textStyle: {
      type: Object,
      default () {
        return {
          color: "#ffffff",
          fontSize: "18"
        }
      },
    },
    axisLabelYColor: {
      type: String,
      default: '#e2e9ff'
    },
    titleScale: {
      type: String,
      default: "rgba(255,255,255,1)"
    },
    scaleStyle: {
      type: String,
      default: 'rgba(255,255,255,0.12)'
    },
    lineStyleX: {
      type: String,
      default: 'rgba(255,255,255,0.0)'
    },
    axisLabelX: {
      type: Object,
      default () {
        return {
          margin: 10,
          color: '#e2e9ff',
        }
      }
    },
    nameValue: {
      type: String,
      default: ""
    },
    zeroGradient: {
      type: String,
      default: 'rgba(251,119,34,1)'
    },
    oneGradient: {
      type: String,
      default: 'rgba(251,119,34,.34)'
    },
    showY: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      ids: this.generatorOnlyId(),
      chartHeight: "500px",
      chartWidth: "1000px"
    }
  },
  watch: {},
  // 1.先创建需要渲染盒子的宽高
  created () {
    this.generatorWithAndHeight();
  },
  // 2.再创建渲染图形
  mounted () {
    this.drawChart();
  },

  methods: {
    // 生成图表的唯一ID
    generatorOnlyId () {
      return (
        this.id +
        this.$moment().format("YYYYMMDDHHmmssSSS") +
        Math.floor(Math.random() * 10000)
      );
    },
    // 生成渲染图表div的宽度与高度
    generatorWithAndHeight () {
      this.chartWidth = `${this.width ? this.width : document.body.offsetWidth * 0.8}px`;
      this.chartHeight = `${this.height ? this.height : document.body.offsetHeight * 0.6}px`;
    },
    // 绘制图表
    drawChart () {
      let myChart = this.$echarts.init(document.getElementById(this.ids));
      // 判断初始化是否成功，如失败，则输出错误
      if (myChart === undefined || myChart === null || myChart === "") {
        console.error(`echarts init dom id ${this.id} failed`);
        return;
      }
      // 判断图表类型，根据图表类型渲染不同的图表
      switch (this.chartType) {
        case "line":
          myChart.setOption(this.lineChartOption());
          break;
        default:
          console.error(`chartType ${this.chartType} is invalid`);
          break;
      }

      let self = this;
      let work = null;
      window.addEventListener("resize", function () {
        self.generatorWithAndHeight(); // self设置当前图形的高度
        if (work == null) {
          // 可视窗口大小改变的时候触发
          work = setTimeout(function () {
            myChart.resize();
            work = null;
          }, 100);
        }
      });
    },
    lineChartOption () {
      return {
        backgroundColor: this.backgroundColor,
        title: {
          text: this.titleText,
          subtext: this.subtext,
          left: "center",
          textStyle: {
            color: this.textStyle.color,
            fontSize: this.textStyle.fontSize,
          },
        },
        grid: {
          top: this.gridValue.top,
          right: this.gridValue.right,
          left: this.gridValue.left,
          bottom: this.gridValue.bottom
        },
        xAxis: {
          type: "category",
          data: this.chartDataX,
          axisLine: {
            lineStyle: {
              color: this.lineStyleX
            }
          },
          axisLabel: {
            margin: this.axisLabelX.margin,
            color: this.axisLabelX.color,
            textStyle: {
              fontSize: 14
            },
          },
        },
        yAxis: {
          type: "value",
          show: this.showY,
          name: this.nameValue,
          axisLabel: {
            formatter: '{value}',
            color: this.axisLabelYColor,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: this.titleScale
            }
          },
          splitLine: {
            lineStyle: {
              color: this.scaleStyle
            }
          }
        },
        series: [
          {
            data: this.chartDataY,
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#FB7722" //改变折线颜色
                }
              }
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: this.zeroGradient // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: this.oneGradient // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      };
    }
  }
}
</script>
<style lang="scss" scoped>
</style>